<template>
  <div class="authentication-home">
    <div class="operation-info">
      <div class="select-tabs">
        <tab-sel :tabs="tabsArr" :info="tabsArr[activeIndex].list" @seled='activeItem' />
      </div>
      <div class="operation-video">
        <video controls preload :src="videoPath"></video>
      </div>
    </div>
    <div class="business-card-corver">
      <business-card
        class="business-card-item"
        :data="item"
        v-for="(item, index) in cardList"
        :key="index + 'm'"
      />
      <div
        class="placeholder-item"
        v-for="(item, index) in cardList.length * 3"
        :key="index + 'n'"
      ></div>
    </div>
  </div>
</template>
<script>
import tabSel from '@/moduleComponents/home/tab-sel.vue'
import businessCard from '@/moduleComponents/home/business-card.vue'
import { getCompanyListByUser } from '@api/m_staff_center_v1.js'
export default {
  name: 'authenticationHome',
  components: {
    tabSel,
    businessCard
  },
  data() {
    return {
      tabsArr: [{name: '企业认证', id: 1,list: [
        {title: '管理员信息维护', text: '创建一个您的企业。', key: 1},
        {title: '企业证照信息维护', text: '加入一个已认证的企业。', key: 2},
        {title: '认证结果', text: '加入一个已认证的企业。', key: 3}
      ]}, {name: '绑定企业', id: 2,list: [
        {title: '加入企业', text: '加入一个已认证的企业。', key: 1},
        {title: '企业审核', text: '加入一个已认证的企业。', key: 2},
      ]}],
      cardList: [
        {
          title: '企业认证',
          info: '已认证',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-rzbg-icon.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-yrzqysl-bg.png')
        },
        {
          title: '绑定企业',
          info: '已绑定',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-grdzqzrzbg-icon.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-yrzqysl-bg.png')
        }
      ],
      activeIndex: 0,
      videoPath: 'https://m.met-ec.com/cdn/uc/pc/企业认证.mp4'
    }
  },
  created(){
    this.getData()
  },
  methods:{
    activeItem(index) {
      this.activeIndex = index
      console.log(this.activeIndex,'videoPath')
      if(this.activeIndex === 1){
        this.videoPath = 'https://m.met-ec.com/cdn/uc/pc/加入企业.mp4'
      } else {
        this.videoPath = 'https://m.met-ec.com/cdn/uc/pc/企业认证.mp4'
      }
    },  
    getData(){
      this.$axios({
        method: 'GET',
        url: getCompanyListByUser
      })
        .then(res => {
          let result = res.data.payload
          this.cardList[0].num = (result || []).filter(item => (item.ifAdmin===1&&item.auditStatus===1)).length
          this.cardList[1].num = (result || []).filter(item => (item.ifAdmin===0&&item.auditStatus===1)).length
        })
        .finally(() => {})
    }
  }
}
</script>
<style lang="less">
.authentication-home {
  box-sizing: border-box;
  padding: 14px 26px;
  overflow: auto;
  .operation-info {
    display: flex;
    .select-tabs {
      width: 450px;
      .info-wrapper {
        height: calc(100% - 40px);
      }
    }
    .operation-video {
      flex: 1;
      height: auto;
      padding-top: 36px;
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
  .business-card-corver {
    margin-top: 44px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .business-card-item {
      margin-top: 20px;
    }
    .placeholder-item {
      width: 260px;
      height: 0;
      font-size: 0;
    }
  }
}
</style>
